Automated open graph images for blog posts #582
Conversation
sjoerdbeentjes
force-pushed
the
og-images
branch
6 times, most recently
from
0cc1090 to
3a611cf
Compare
sjoerdbeentjes
force-pushed
the
og-images
branch
from
1d3e0de to
e655d08
Compare
.vscode/settings.json
Outdated
| "deno.enable": true, | ||
| "deno.unstable": true, | ||
| "deno.enablePaths": ["netlify/edge-functions"] | ||
| } |
There was a problem hiding this comment.
Bit anti-pragmatic, but I do not like to check in editor specific config files.
There was a problem hiding this comment.
I'll add them to .gitignore 👍
There was a problem hiding this comment.
😅 I meant your global .gitignore
src/composables/useOpenGraphImage.js
Outdated
|
|
||
| const { title, image, authors } = openGraphImage | ||
|
|
||
| const url = `/api/og?title=${title}${image ? `&imageUrl=${image.url}` : ''}${authors.length ? `&authors=${JSON.stringify(authors)}` : ''}`; |
There was a problem hiding this comment.
Let's use withQuery from ufo to create this URL.
There was a problem hiding this comment.
It didn't seem to handle json very well, so it became this: https://github.com/voorhoede/voorhoede-website/pull/582/files#diff-d638ef46d91b5f3782a9f6bf0bbaf9b4d0806449ba02b60737bc839d79251f84R10-R13
Open for suggestions on how to fix this.
There was a problem hiding this comment.
ah maybe we shouldn't pass JSON in a query parameter at all?
| @@ -0,0 +1,18 @@ | |||
| export function useOpenGraphImage(openGraphImage) { | |||
There was a problem hiding this comment.
Let's move this composable code to useSeoHead.
sjoerdbeentjes
force-pushed
the
og-images
branch
from
e655d08 to
9dc9ef4
Compare
sjoerdbeentjes
force-pushed
the
og-images
branch
2 times, most recently
from
91c6f68 to
8214925
Compare
sjoerdbeentjes
force-pushed
the
og-images
branch
from
8214925 to
2404ee6
Compare
Changes
Stuff to consider
Example of generated image:
https://deploy-preview-582--voorhoede-website.netlify.app/api/og?title=Can%20AI%20generate%20illustrations%20in%20a%20custom%20style?&imageUrl=https://www.datocms-assets.com/6524/1677686010-ai_illustratie_robot_w_trans.png&authors=[{%22name%22:%22James%22,%22image%22:{%22url%22:%22https://www.datocms-assets.com/6524/1675178862-james.png%22}}]
on page: https://deploy-preview-582--voorhoede-website.netlify.app/en/blog/can-ai-generate-illustrations-custom-style/